<template>
  <div class="stackBar-wrap" :style="{ width: width, height: height }">
    <div class="stackBar" ref="stackBar"></div>
  </div>
</template>

<script>
/* eslint-disable */
import echarts from "echarts";
export default {
  props: {
    formatter: {
      type: String,
      default: () => "",
    },
    dataZoom: {
      type: Array,
      default: () => [
        {
          type: "slider",
          show: false,
          start: 0,
          end: 100,
        },
      ],
    },
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    isShowLegend: {
      type: Boolean,
      default: false,
    },
    legend: {
      type: Array,
      default: () => [],
    },
    xAxis: {
      type: Array,
      default: () => [],
    },
    grid: {
      type: Object,
      default: () => {
        return {
          left: "4%",
          right: "4%",
          top: "14%",
          bottom: "4%",
          y2: 30,
          containLabel: true,
        };
      },
    },
    value: {
      type: Array,
      default: () => [],
    },
    colors: {
      type: Array,
      default: () => [
        "rgba(255, 131, 105, 1)",
        "rgba(153, 55, 221, 1)",
        "rgba(76, 177, 220, 1)",
        "#47a9e1",
        "#9bd5e8",
      ],
    },
    itemStyle: {
      type: Array,
      default: () => [
        {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 131, 105, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255, 131, 105, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          barBorderRadius: [20, 20, 0, 0],
        },
        {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(153, 55, 221, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(153, 55, 221, 1)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          barBorderRadius: [20, 20, 0, 0],
        },
        {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "rgba(76, 177, 220, 1)",
            },
            {
              offset: 1,
              color: "rgba(76, 177, 220, 1)",
            },
          ]),
          barBorderRadius: [20, 20, 0, 0],
        },
        {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#45a3d9",
            },
            {
              offset: 1,
              color: "#1b4772",
            },
          ]),
          barBorderRadius: [20, 20, 0, 0],
        },
      ],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      const _this = this;
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",
          },
          formatter: function (params) {
            if (_this.formatter != "") {
              return (
                params[0].name + "<br/>" + params[0].value + _this.formatter
              );
            } else {
              // return params[0].name + "<br/>" + params[0].value;
              let str = params[0].name;
              params.forEach((item) => {
                str += `<br/>${item.seriesName}:${item.value}`;
              });
              return str;
            }
          },
        },
        title: {
          show: false,
        },
        color: this.colors,
        legend: {
          show: true,
          icon: "rect",
          top: "0%",
          left: "center",
          itemWidth: 15,
          itemHeight: 15,
          // itemGap: 25,
          data: this.legend,
          textStyle: {
            fontSize: 14,
            color: "rgba(255, 255, 255, 1)",
          },
        },
        grid: this.grid,
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#ffffff",
            fonySize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(54, 61, 82, 1)",
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: this.xAxis,
        },
        yAxis: {
          show: true,
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(54, 61, 82, 1)",
              width: 1,
            },
            onZero: false,
          },
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 12,
            formatter: function (val) {
              if (_this.formatter != "") {
                return val + _this.formatter;
              } else {
                return val;
              }
            },
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                if (_this.formatter != "") {
                  return params.value + _this.formatter;
                } else {
                  return params.value;
                }
              },
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "rgba(54, 61, 82, 1)",
              width: 1,
            },
          },
        },
        dataZoom: _this.dataZoom,
        series: [],
      };
      for (var i = 0; i < this.legend.length; i++) {
        this.option.series.push({
          name: this.legend[i],
          type: "bar",
          barWidth: "20px",
          barCategoryGap: "10%",
          itemStyle: { normal: this.itemStyle[i] },
          label: {
            show: false,
            fontSize: 12,
            position: "inside",
          },
          data: this.value[i],
        });
      }
      this.chart.setOption(this.option);
    },
    //调用图表切换legend
    toggleLegend(toggleIndex) {
      this.chart.dispatchAction({
        type: "legendToggleSelect",
        // 图例名称
        name: this.legend[toggleIndex].name,
      });
    },
    //图表全选
    legendAllSelect() {
      this.chart.dispatchAction({
        type: "legendAllSelect",
      });
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.stackBar);
    window.onresize = () => {
      this.chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.stackBar-wrap {
  width: 100%;
}
.stackBar {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>
